<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
    .input-group {
        width: 400px;
        margin-bottom: 50px;
    }
    </style>
</head>
<body>
    <h1>AlloyUI - Char counter</h1>
    <div class="input-group">
        <input id="input1" class="form-control" type="text">
        <span class="input-group-addon" id="counterDescription1">
            <span id="counter1"></span> character(s) remaining
        </span>
    </div>

    <p>
        <button id="button2-1" class="btn btn-primary">set maxLength to 10</button>
        <button id="button2-2" class="btn btn-primary">set maxLength to 20 </button>
    </p>
    <div class="input-group">
        <input id="input2" class="form-control" type="text">
        <span class="input-group-addon" id="counterDescription2">
            <span id="counter2"></span> character(s) remaining
        </span>
    </div>

    <div class="input-group">
        <textarea id="input3" class="form-control"></textarea>
        <span class="input-group-addon" id="counterDescription3">
            <span id="counter3"></span> character(s) remaining
        </span>
    </div>

    <script>
    YUI({ filter:'raw' }).use('aui-char-counter', function(Y) {

        new Y.CharCounter({
            input: '#input1',
            counter: '#counter1',
            describedby: 'counterDescription1',
            maxLength: 10,
            on: {
                maxLength: function(event) {
                    alert('The max length was reach');
                }
            }
        });

        var charCounter = new Y.CharCounter({
            input: '#input2',
            counter: '#counter2',
            describedby: 'counterDescription2',
            maxLength: 20
        });

        Y.on('click', function() { charCounter.set('maxLength', 10); }, '#button2-1');
        Y.on('click', function() { charCounter.set('maxLength', 20); }, '#button2-2');

        new Y.CharCounter({
            input: '#input3',
            counter: '#counter3',
            describedby: 'counterDescription3',
            maxLength: 255
        });

    });
    </script>
</body>
</html>